<template>
  <div class="exchangeItem">
    <div v-if="limitText" class="timeLimited">
      <div class="limitedTitle">剩余</div>
      <div class="limitedText">{{ limitText }}</div>
    </div>
    <div class="icon">
      <img :src="exchangeInfo.target.icon">
    </div>
    <div class="name">{{ getExchangeName(exchangeInfo.target) }}</div>
    <div class="sourceList">
      <div v-for="(item, index) in exchangeInfo.source" :key="index" class="sourceItem">
        <div class="sourceIcon">
          <img :src="item.icon">
        </div>
        <div class="sourceValue">
          {{ item.count }}<span v-if="index < exchangeInfo.source.length - 1">+</span>
        </div>
      </div>
    </div>
    <span :class="['btn', {'disableBtn': disableExchange}]" @click="doExchange">
      兑换
    </span>
  </div>
</template>
<script>
import { Dialog } from 'vant'
import { getExchangeName } from '@/lib/js/utils/activity'
import $api from '../api'
const minute1 = 1000 * 60
const hour1 = minute1 * 60
const day1 = hour1 * 24
const day7 = day1 * 7

export default{
  props:{
    exchangeInfo: {
      type: Object,
      default(){
        return {}
      }
    }
  },
  emits:['exchange-success'],
  computed: {
    disableExchange(){
      let disableFlag = false
      this.exchangeInfo.source.every(item => {
        if(item.count > item.got){
          disableFlag = true
          return false
        }
        return true
      })
      return disableFlag
    },
    limitText(){
      // eslint-disable-next-line camelcase
      const { left_seconds } = this.exchangeInfo
      // eslint-disable-next-line camelcase
      const leftSeconds = left_seconds * 1000
      if(leftSeconds > day7){
        return ''
      }
      if(leftSeconds > day1){
        return `${Math.floor(leftSeconds / day1)}天`
      }
      if(leftSeconds > hour1){
        return `${Math.floor(leftSeconds / hour1)}时`
      }
      if(leftSeconds > minute1){
        return `${Math.floor(leftSeconds / minute1)}分`
      }
      return '0分'
    }
  },
  methods: {
    async doExchange(){
      if(this.disableExchange){
        return
      }
      const sourceTextArray = this.exchangeInfo.source.map(item => {
        return `${item.name}×${item.count}`
      })

      Dialog.confirm({
        title: '',
        transition: false,
        //确认花费#钻石数量#钻石，为ID#hid#（#昵称#）开通#国王贵族#（30天）吗？
        message: `确认花费以下碎片\n${sourceTextArray.join(', ')}\n兑换${this.getExchangeName(this.exchangeInfo.target)}吗？`
      }).then(async () => {
        await $api.doExchange({ exchangeId: this.exchangeInfo.id })
        this.$toast.success('兑换成功')
        setTimeout(() => {
          this.$emit('exchange-success')
        }, 500)
      }).catch(() => {
        // on cancel
      })

    },

    // getExchangeXXName(item){
    //   return getExchangeName(item)
    // },

    getExchangeName(item){
      return getExchangeName(item)
    }

  }
}
</script>
<style lang="scss" scoped>

.exchangeItem{
  position: relative;
  width: 2.08rem;
  height: 2.76rem;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 8px;
  padding-top: 0.2rem;
  padding-bottom: 0.3rem;
  margin-bottom: 0.3rem;
  margin-right: 0.33rem;
  .timeLimited{
    position: absolute;
    width: 0.56rem;
    height: 0.6rem;
    top: -0.1rem;
    right: 0.02rem;
    @include bg('../images/home/timelimited.png');
    .limitedTitle{
      font-size: 0.2rem;
      position: absolute;
      left:0;
      right:0;
      top: 0;
      text-align: center;
    }
    .limitedText{
      position: absolute;
      bottom: 0.05rem;
      left: 0;
      right: 0;
      font-size: 0.2rem;
      text-align: center;
    }
  }
  .icon{
    width: 0.96rem;
    height: 0.96rem;
    margin: 0 auto;
    >img{
      max-width: 100%;
      max-height: 100%;
    }
  }
  .name{
    width: 100%;
    text-align: center;
    font-size: 0.28rem;
    @include ellipsis
  }

  .sourceList{
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 0.6rem;
    .sourceItem{
      display: flex;
      justify-content: center;
      align-items: center;
      letter-spacing: -1px;
      font-size: 0.2rem;
      .sourceIcon{
        width: 0.2rem;
        height: 0.2rem;
      }
      .sourceValue{
         opacity: 0.6;
      }
    }

  }

  .btn{
    margin: 0 auto;
    display: block;
    background: #FF7580;
    border-radius: 8px;
    height: 0.4rem;
    line-height: 0.4rem;
    width: 1rem;
    text-align: center;
    font-size: 0.2rem;
  }
  .disableBtn{
    opacity: 0.4;
    border: 1px solid rgba(255,255,255);
    background: transparent;
  }
}
</style>
